<script setup>
import SearchSuggestion from "@/views/HomePage/Components/search-suggestion.vue";
import SearchHistory from "@/views/HomePage/Components/search-history.vue";
import SearchResult from "@/views/HomePage/Components/search-result.vue";
import { ref } from 'vue';

const searchText = ref("");
const isResultShow = ref(false);

const onSearch =function () {
  console.log('onSearch');
  isResultShow.value = true;
}
</script>

<template>
  <div id="box">
    <form action="/">
      <van-search v-model="searchText"
                  show-action
                  placeholder="请输入搜索关键词"
                  @search="onSearch"
                  @cancel="$router.back()"
                  @focus="isResultShow = false"
      />
    </form>
    <SearchResult v-if="isResultShow"  :search-text="searchText"></SearchResult>
    <SearchSuggestion v-else-if="searchText" :search-text="searchText"></SearchSuggestion>
    <SearchHistory v-else></SearchHistory>
  </div>
</template>

<style scoped>
@import "~@/assets/bootstrap.min.css";
*{
  margin: 0;
  padding: 0;
}
</style>